<div class="em-gradient flex flex-col items-centered justify-center p-4">
  <div class="flex justify-between w-full mb-10 px-4">
    <div class="flex item-center ml-10">
      <img
        src="/images/user-image.svg"
        alt="Profile Image"
        class="round-image-padding w-8 h-8 mb-6"
      />
      <div class="flex flex-col ml-4">
        <div class="font-bold text-base text-emLavender-dark">
          <%= @current_user.email %><span class="text-white">/</span><%= @gist.name %>
        </div>
        <div class="text-lg text-white font-bold"><%= @gist.relative %></div>
        <p class="text-left text-sm text-white font-brand"><%= @gist.description %></p>
      </div>
    </div>
    <div class="flex item-center mr-10">
      <button class="flex items-center bg-emPurple hover:bg-emPurple-dark border-white border-[1px] text-white h-8 font-bold py-2 px-2 rounded-l-md">
        <img src="/images/BookmarkOutline.svg" alt="Save Button" /> Save
      </button>
      <div class="flex items-center bg-transparent text-white font-brand h-8 rounded-r-md border-white border-[1px] px-3">
        0
      </div>
    </div>
  </div>
</div>
<div id="edit-section" style="display: none">
  <.live_component
    module={GistFormComponent}
    id={@gist.id}
    form={to_form(Gists.change_gist(@gist))}
    current_user={@current_user}
  />
</div>
<div id="syntax-section" style="display: block">
  <div class="justify-center px-28 w-full mb-10">
    <div class="flex p-2 items-center justify-between bg-emDark rounded-t-md border">
      <div class="w-[300px] pl-2 font-brand font-bold text-base text-emLavender-dark">
        <%= @gist.name %>
      </div>
      <div>
        <%= if @current_user.id == @gist.user_id do %>
          <button
            class="px-1 interactive-img-btn"
            type="button"
            phx-click="delete"
            phx-value-id={@gist.id}
          >
            <img src="/images/delete.svg" alt="Delete Button" />
          </button>
          <button
            id="edit-btn"
            class="px-1 interactive-img-btn"
            type="button"
            phx-hook="ToggleEdit"
          >
            <img src="/images/edit.svg" alt="Edit Button" />
          </button>
        <% end %>
        <button
          id="copy-btn"
          class="px-1 interactive-img-btn"
          type="button"
          phx-hook="CopyToClipboard"
          data-clipboard-gist={@gist.markup_text}
        >
          <img src="/images/copy.svg" alt="Copy Button" />
        </button>
      </div>
    </div>
    <div id="gist-wrapper" class="flex w-full">
      <textarea id="syntax-numbers" class="syntax-numbers rounded-bl-md" readonly></textarea>
      <div
        id="highlight"
        class="syntax-area w-full rounded-br-md"
        phx-hook="Highlight"
        data-name={@gist.name}
      >
        <pre><code class="language-elixir">
          <%= @gist.markup_text %>
        </code></pre>
      </div>
    </div>
  </div>
</div>
